<!DOCTYPE html>
<html>
<head>
  <script src="../../../webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="../../polymer.html" rel="import">

  <style>

    @media (min-width: 800px) {
      body {
        background: red;
      }
    }

    @media (max-width: 799px) {
      body {
        background: green;
      }
    }
  </style>


</head>
<body>

  <dom-module id="x-foo">
    <template>
      <style>

        :host {
          display: block;
          margin-left: var(--foo, 0px);
        }

        .item {
          width: 100px;
          height: 100px;
          border: 1px solid white;
        }

        @media (min-width: 800px) {
          :host {
            --foo: 10px;
          }

          .item {
            background: red;
          }
         }

        @media (max-width: 799px) {
          .item {
            background: green;
          }
        }

      </style>

      <div class="item"></div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo'
        });
      });
        var debouncer;
        window.onresize = function() {
          Polymer.Debounce(debouncer, function() {
            Polymer.updateStyles();
          }, 100);
        };
    </script>
  </dom-module>


  <h1>The box should match the background color</h1>

  <x-foo></x-foo>

</body>
</html>
